<template>
  <div class="block">
    <div v-for="(activity, index) in activities" :key="index">
      <div class="ContentFrame" @click="DetailedContent(activity.blogid)">
        <div style="display: none">{{activity.blogid}}</div>
        <div class="blogTitle">{{activity.blogtitle}}</div>
        <div class="blogTitle"><img :src=activity.blogpicture /></div>
        <el-divider content-position="right">{{activity.blogtime}}</el-divider>
      </div>
    </div>
  </div>
</template>

<script>
import ShowContentModules from "./ShowContentModules";
//博客内容列表
export default {
  name: "blogContentModules",
  components: {ShowContentModules},
  inject: ['reload'],
  data() {
    return {
      reverse: true,
      activities: ''
    };
  },
  created() {
    this.Get_Content();
  },
  methods:{
    Get_Content(){
      this.axios.get(this.Global.BASE_URL+'/Content/GetContents').then((res)=>{
        if("2000" == res.data.msg){
          this.activities = res.data.data;
        }
        else this.$CustomMessage_WAENING('博客内容','无内容！');
      }).catch(erroe=>{
        this.$CustomMessage_ERROR('博客内容','内容错误！');
      })
    },
    //显示详细信息
    DetailedContent(data){
      this.$parent.ContentShowOver(1,data);
    },
    reloadCont(){
      this.reload()
    }
  }
}
</script>

<style scoped>
.ContentFrame{
  border: 2px solid #e5e9f2;
  border-radius: 7px;
  padding:10px 10px 0px 10px;
  margin-bottom: 10px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
}
/*1.只对英文起作用，以字母作为换行依据。
  2.只对英文起作用，以单词作为换行依据。
  3.只对中文起作用，强制换行。*/
.blogTitle{
  font-size: 20px;
  word-break: break-all;
  word-wrap: break-word;
  white-space: pre-wrap;
  text-overflow: inherit;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  font-weight: 600;
}
</style>
